<template>
	<view class="box-nav-bar">
		<!-- :style="`height: ${start_top + 20}px;`" -->
		<!-- :style="`padding-top:${menu_button_top}px;height:${menu_button_height}px;`"  -->
		<view class="box-height"></view>
		<view class="box-fixed">
			<view class="content">
				<view class="text">
					{{ title }}
				</view>
				<!-- 减去上下的border -->
				<!-- 	:style="`height:${menu_button_height - 2}px;`" -->
				<view @click="open_sreach" class="sreach">
					<uni-icons class="sreach-icon deep-color deep-size" type="search"></uni-icons>
					<text class="sreach-text">搜索</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { inject } from 'vue'
defineProps(['title'])
const menu_button_height = inject('menu_button_height')
const menu_button_top = inject('menu_button_top')
const start_top = inject('start_top')

const open_sreach = function () {
	uni.navigateTo({
		url: '/pages/search/search'
	})
}
</script>

<style scoped lang="scss">
.box-nav-bar {
	.box-height {
		height: 80rpx;
	}
	.box-fixed {
		// 固定定位用100vw，已脱离文档流
		width: 100vw;
		height: 80rpx;
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 999;

		background: linear-gradient(to bottom, transparent, #fff 550rpx),
			linear-gradient(to right, #ff8c94, #ffd3b5);

		@extend .f-c-c-n;
		justify-content: start;

		.content {
			margin: 0 $my-margin-rpx;
			@extend .f-c-c-n;
			justify-content: start;

			.text {
				font-size: 22rpx;
				font-weight: 1800rpx;
				padding: 10rpx 20rpx;
				color: white;
				border-radius: 16rpx;
				box-shadow: 0 0 20px #ffefe1;
			}

			.sreach {
				font-size: 22rpx;
				width: 200rpx;
				height: 40rpx;
				@extend .f-c-c-n;
				justify-content: start;
				margin-left: 25rpx;
				padding-left: 20rpx;
				border: 1px solid white;
				border-radius: 100rpx;
				background-color: #f3f3f3;
				.sreach-text {
					margin-left: 10rpx;
					color: #aaa;
				}
			}
		}
	}
}
</style>
